<template>
	<view class="contents">
		<view class="header">
			<view class="left">
				<image src="https://pockets.qixdian.cn/upload/20240711/668f8ea993b64.png"></image>
			</view>
			<view class="right">
				在线开盒 | 正品保障 | 100%中奖
			</view>
		</view>
		<view class="caozuo">
			<view class="left">
				<view>批量操作 </view>
				<image src="https://pockets.qixdian.cn/upload/20240711/668f8ea98d3cb.png"></image>
			</view>
			<view class="right">
				<view class="duihuan btn">兑 换</view>
				<view class="tihuo btn">提 货</view>
				<view class="zengsong btn">赠 送</view>
			</view>
		</view>
		<scroll-view class="cabinet" scroll-y="true" :refresher-triggered="refresher" @refresherrefresh="refreshs"
			@scrolltolower="scrolltolower">
			<view v-if="cabinetList.length > 0">
				<view class="cabinetList" v-for="(item, index) in cabinetList" :key="index">
					<image v-if="item.level_id == 4"
						src="https://pockets.qixdian.cn/upload/20240305/65e6a54f9563a.png" class="cabinetItem">
					</image>
					<image v-if="item.level_id == 3"
						src="https://pockets.qixdian.cn/upload/20240305/65e6a54f8b7d5.png" class="cabinetItem">
					</image>
					<image v-if="item.level_id == 2"
						src="https://pockets.qixdian.cn/upload/20240305/65e6a54fa48ed.png" class="cabinetItem">
					</image>
					<image v-if="item.level_id == 1"
						src="https://pockets.qixdian.cn/upload/20240305/65e6a54f949f1.png" class="cabinetItem">
					</image>
					<view class="top">
						<view class="left">{{item.resource}}</view>
						<view class="right">{{item.created_at}}</view>
					</view>
					<view class="center">
						<view class="left">
							<view
								:class="item.level_id == 1 ? 'level1' : (item.level_id == 2 ? 'level2' : (item.level_id == 3 ? 'level3' : (item.level_id == 4 ? 'level4' : '')))">
								<image :src="item.blind_box_prize_image" mode=""></image>
							</view>
						</view>
						<view class="right">
							<view class="name">
								{{item.blind_box_prize_name}}
								<view class="num">
									x{{item.num}}
								</view>
							</view>
							<view class="price">
								￥{{item.price}}<view class="cankao">参考价</view>
							</view>
							<view class="recPrice">
								兑换价：{{item.recovery_price}}
								<image src="https://pockets.qixdian.cn/upload/20240305/65e6e8d1d05fe.png" mode=""></image>
							</view>
							<view class="time">
								请在<view style="color:#08E0F3">{{getDayDifference(item.created_at,item.expired_at)}}
								</view>天内进行提货，过期将只能兑换
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="left">
							<image v-if="item.level_id == 4"
								src="https://pockets.qixdian.cn/upload/20240305/65e6de733f023.png" class="level">
							</image>
							<image v-if="item.level_id == 3"
								src="https://pockets.qixdian.cn/upload/20240305/65e6de733e4c1.png" class="level">
							</image>
							<image v-if="item.level_id == 2"
								src="https://pockets.qixdian.cn/upload/20240305/65e6de733c5fd.png" class="level">
							</image>
							<image v-if="item.level_id == 1"
								src="https://pockets.qixdian.cn/upload/20240305/65e6de733e86a.png" class="level">
							</image>
						</view>
						<view class="right">
							<view class="tihuo">提 货</view>
							<view class="duihuan">兑 换</view>
							<view class="fanhui">反 悔</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else></view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cabinetList: [],
				page:1,
				lastPage:0,
				status:1,
				token:'',
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			if(this.token){
				this.page = 1;
				this.getList(2)
			}
		},
		methods: {
			getDayDifference(date1, date2) {
				// 将日期字符串转换为日期对象
				var d1 = new Date(date1);
				var d2 = new Date(date2);

				// 获取日期对象的时间戳
				var timestamp1 = d1.getTime();
				var timestamp2 = d2.getTime();

				// 计算两个时间戳之间的毫秒差
				var timeDiff = Math.abs(timestamp2 - timestamp1);

				// 将毫秒差转换为天数并返回
				var dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
				return dayDiff;
			},
			scrolltolower(){
				if(this.page >= this.lastPage){
					this.show('没有更多了');
					return;
				}
				this.page++;
				this.getList(1)
			},
			refreshs(){
				if(!this.token){
					this.refresher = false;
					return;
				}
				this.refresher = true;
				this.page = 1;
				this.getList(2);
			},
			getList(type){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let data = {
					page: this.page,
					status: this.status,
				}
				this.$Request.get(this.$api.cabinet.index,data).then(res => {
					uni.hideLoading()
					if(res.code == 200){
						this.refresher = false;
						if(type == 1){
							this.cabinetList = this.cabinetList.concat(res.data.data);
						} else {
							this.cabinetList = res.data.data;
						}
						this.lastPage = res.data.last_page;
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.contents {
		width: 100vw;
		min-height: 100vh;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		padding: 0 25rpx;
		padding-top: 100rpx;
		background-image: url("https://pockets.qixdian.cn/upload/20240711/668f855f30efb.png");
		background-size: 100% 100%;
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;

			.left {
				image {
					width: 122rpx;
					height: 127rpx;
				}
			}

			.right {
				font-weight: 500;
				font-size: 24rpx;
			}
		}

		.caozuo {
			background-image: url('https://pockets.qixdian.cn/upload/20240711/668f8ea9a2c44.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 95rpx;
			padding: 0 20rpx 17rpx;

			.left {
				color: #08E0F3;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-top: 4rpx;
					margin-left: 10rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.duihuan,
				.tihuo {
					margin-right: 20rpx;
				}

				.btn {
					background: url(https://pockets.qixdian.cn/upload/20240711/668f8ea9a077c.png) no-repeat;
					background-size: 100% 100%;
					width: 110rpx;
					height: 55rpx;
					line-height: 55rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
				}
			}
		}

		.cabinet {
			height: calc(100vh - 343rpx);

			.cabinetList {
				width: 100%;
				height: 420rpx;
				position: relative;
				margin-bottom: 19rpx;
				.cabinetItem {
					position: absolute;
					width: 100%;
					height: 100%;
				}

				.top {
					display: flex;
					justify-content: space-between;
					color: #fff;
					padding: 18px 33rpx;

					.left {
						font-weight: 500;
						font-size: 26rpx;
						position: absolute;
						left: 5%;
					}

					.right {
						font-weight: 500;
						font-size: 24rpx;
						opacity: 0.5;
						position: absolute;
						right: 5%;
					}
				}

				.center {
					height: 230rpx;
					margin-top: 20rpx;

					.left {
						width: 230rpx;
						height: 230rpx;
						position: absolute;
						left: 38rpx;
						image {
							width: 230rpx;
							height: 230rpx;
						}

						.level1 {
							background: url(https://pockets.qixdian.cn/upload/20240305/65e6dad8ae033.png) no-repeat;
							background-size: 100% 100%;
						}

						.level2 {
							background: url(https://pockets.qixdian.cn/upload/20240305/65e6daf36ba76.png) no-repeat;
							background-size: 100% 100%;
						}

						.level3 {
							background: url(https://pockets.qixdian.cn/upload/20240305/65e6dac7cd399.png) no-repeat;
							background-size: 100% 100%;
						}

						.level4 {
							background: url(https://pockets.qixdian.cn/upload/20240305/65e6daf36b7fe.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.right {
						width: 373rpx;
						position: absolute;
						right: 22px;
						margin-top: 20rpx;
						.name {
							color: #fff;
							font-weight: bold;
							font-size: 28rpx;
							display: -webkit-box;
							overflow: hidden;
							width: 298rpx;
							text-overflow: ellipsis;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;

							.num {
								color: #08E0F3;
								position: absolute;
								right: 15px;
								top: 1px;
								font-weight: 400;
							}
						}
						.price{
							color:#F56198;
							display: flex;
							margin-top: 18rpx;
							.cankao{
								width: 80rpx;
								height: 36rpx;
								background: #030524;
								border-radius: 8rpx;
								opacity: 0.41;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 36rpx;
								margin-left: 10rpx;
							}
						}
						.recPrice{
							font-weight: 500;
							font-size: 22rpx;
							color: #A9AECA;
							margin-top: 18rpx;
							image{
								width: 20rpx;
								height: 20rpx;
							}
						}
						.time{
							color:#A9AECA;
							font-weight: 500;
							font-size: 22rpx;
							display: flex;
							margin-top: 18rpx;
						}
					}
				}

				.bottom {
					.left{
						position: absolute;
						width: 230rpx;
						left: 38rpx;
						margin-top: 20rpx;
						image{
							width: 118rpx;
							height: 47rpx;
							display: block;
							margin: auto;
						}
					}
					.right{
						position: absolute;
						right: 38rpx;
						color:#fff;
						display: flex;
						text-align: center;
						line-height: 55rpx;
						margin-top: 16rpx;
						font-weight: 500;
						font-size: 24rpx;
						.tihuo{
							width: 110rpx;
							height: 55rpx;
							background: url(https://pockets.qixdian.cn/upload/20240304/65e595e5352ff.png) no-repeat;
							background-size:100% 100%;
							margin-right: 20rpx;
						}
						.duihuan{
							width: 110rpx;
							height: 55rpx;
							background: url(https://pockets.qixdian.cn/upload/20240305/65e6f0b40c311.png) no-repeat;
							background-size:100% 100%;
							margin-right: 20rpx;
						}
						.fanhui{
							width: 110rpx;
							height: 55rpx;
							background: url(https://pockets.qixdian.cn/upload/20240305/65e6f0b3d34c3.png) no-repeat;
							background-size:100% 100%;
						}
					}
				}
			}
		}
	}
</style>